
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="Keywords" content="PHP笔记">
        <meta name="Description" content="PHP笔记">
        <meta name="author" content="Clmao">
        <title>PHP笔记 | 写好每一行代码</title>
        <link rel="shortcut icon" href="/code/Public/appicon.png">
        <link href="__PUBLIC__/zui/zui.min.css" rel="stylesheet">
      
        <style>
            *{ margin: 0px; padding: 0px;}
            blockquote{ background-color: #E5E5E5; max-width: 90%; margin-right: 0px; border-left: #CFCF3F 5px solid;}
            .contain{ width:100%; display: block;  }
            
            
            .left{ position: fixed; overflow-y:hidden; overflow-x: hidden; width: 180px;cursor: pointer;}
            .left .pul{ list-style: none; overflow-x: hidden; background-color: #145CCD;}
            .left .pul{ height:99%; overflow-y:scroll; width: 160px;}
            .left .pul .li-header{ position: absolute; top:0; width: 150px;font-size: 14px; background-color: #114CAB; color: #B7B7B7; line-height: 25px; font-weight: bold;}
            
            
            .left li[liextra="1"] { padding-left: 5px; padding-bottom: 5px; padding-top: 5px; margin-bottom: 5px; background-color: #145CCD;}
             .left li[liextra="1"] small{ line-height: 20px; color: #ffffff;}
            .left li[liextra="1"]:hover{background-color:#3280FC;text-decoration: none;}
            
            
            .hide-meun{ display: none; position: absolute; z-index: 999; background-color: #0A3373; width:150px; height:400px; overflow-x: hidden;  }
            .icon-list{ float: right; line-height: 25px; margin-right: 10px;}
            .hide-meun li{ height: 30px;}
            .hide-meun li a{color: #ffffff; line-height: 24px; font-weight: normal; width:150px; padding-left: 10px; font-size: 12px; overflow: hidden; }
            .hide-meun li:hover{ text-decoration: none; background-color: #1868E8; text-decoration: none;}
            .hide-meun li a:hover{ text-decoration: none;}
            .twoli{margin-top: 25px; }
            
            
            .right{float: left; overflow-y:scroll; margin-left: 180px; }
        </style>
        </head>

    <body>
        <div class="contain">
            <div class="left">
                <ul class="pul">
                    <li class="li-header" style='height:30px;'>&nbsp;&nbsp;{$current_name}
                        <ul class="hide-meun" >
                            <foreach name='categorylist' item='categorylist'>
                            <li onclick='redirenew({$categorylist.id})'><a>{$categorylist.title}</a></li>
                            </foreach>
                        </ul>   
                        <i class="icon-list"></i>
                    </li>
                    <foreach name='contentlist' item='list'>
                        <li id='contentli{$list.id}' onclick="getcontent({$list.id})" liextra="1"  <if condition="$key eq 0">class="twoli"</if> ><small>{$list.title}</small></li>
                    </foreach>
                </ul>
                
            </div>
            <div class="right">
                
            </div>
        </div>
    </body>
</html>
<script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script>
<script type="text/javascript">
    
    
    function getcontent(id){
        $.post("{:U("ajaxgetcontent")}",{id:id},
            function(data){
                if(data){
                    $(".right").html(data);
                    $("#contentli"+id).siblings().css("background-color","")
                    $("#contentli"+id).css("background-color","#3280FC");
                }
            }
        );
    }
    function redirenew(id){
        location.href = "{:U("index")}?cid="+id;
        
    }
    
   
    $(function(){
       
       //var html_height = $("html").height();
       var screen_height = document.body.scrollHeight;
       var html_width = $("html").width();
      // alert(html_height);
       $(".left").height(screen_height);
       $(".contain").height(screen_height);
       $(".right").width(html_width-180);
       $(".li-header").click(function(){
            if($(".hide-meun").is(":visible")===false){
                    $(".hide-meun").show();
            }else{
                    $(".hide-meun").hide();
            }
        });
    });
      
    
</script>